<template>
	<BouncedDialog :footer="true" title="选择成员" width="1100px" :dialog-show.sync="dialogShow">
		<div class="selector-container">
			<div class="selector-left">
				<el-tabs v-model="tabActive">
					<el-tab-pane label="部门" name="department" />
					<el-tab-pane label="成员组" name="member" />
				</el-tabs>
				<div v-show="tabActive == 'department'" class="user-search">
					<el-input size="small" placeholder="搜索选中部门下的成员">
						<el-button slot="append" icon="el-icon-search" />
					</el-input>
					<div class="tree-scroll">
						<el-tree
							:data="data"
							:props="{
								children: 'children',
								label: 'label',
							}"
							@node-click="handleNodeClick"
						/>
					</div>
				</div>
				<div v-show="tabActive == 'member'" class="tree-scroll member-group">
					<el-input
						v-if="isAddGroup"
						size="small"
						placeholder="请输入组名称"
						@blur="handleInputBlur"
					/>
					<div v-else class="add-member" @click="handleAddInput">
						<i class="el-icon-circle-plus-outline" /> 新增成员组
					</div>
				</div>
			</div>
			<div class="selector-center">
				<el-tabs v-model="chooseTypeActive">
					<el-tab-pane name="member">
						<template slot="label"> 成员（0） </template>
					</el-tab-pane>
					<el-tab-pane name="lastTime">
						<template slot="label"> 上次选择（0） </template>
					</el-tab-pane>
				</el-tabs>
				<!-- <el-empty description="暂无数据" /> -->
				<div class="user-container">
					<div class="check-item">
						<el-tree :data="userData" show-checkbox node-key="id">
							<div slot-scope="{ node }" class="tree-item">
								<span>{{ node.label }}</span>
								<el-popover v-if="node.isCurrent" placement="right" trigger="hover">
									<el-button type="text">新建分组</el-button>
									<el-button type="text" slot="reference">添加到分组</el-button>
								</el-popover>
							</div>
						</el-tree>
					</div>
				</div>
				<div class="center-footer">
					<div v-if="chooseTypeActive == 'member'">
						<el-button type="text" @click="handleChooseUser('currentPage')">全选本页</el-button>
						<el-button type="text" @click="handleChooseUser('depart')">全选部门</el-button>
					</div>
					<el-button v-else type="text">全选</el-button>
					<el-pagination
						v-if="chooseTypeActive == 'member'"
						:page-size="10"
						layout="total, prev, jumper, next"
						:total="1000"
					/>
				</div>
			</div>
			<div class="selector-right">
				<div class="right-header">
					<p>已选择成员（0）</p>
					<el-button type="text">清空</el-button>
				</div>
			</div>
		</div>
	</BouncedDialog>
</template>

<script>
export default {
	props: {
		dialogShow: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			checkList: [],
			tabActive: 'department',
			chooseTypeActive: 'member',
			data: [
				{
					label: '一级 1',
					children: [
						{
							label: '二级 1-1',
							children: [
								{
									label: '三级 1-1-1',
								},
							],
						},
					],
				},
				{
					label: '一级 2',
					children: [
						{
							label: '二级 2-1',
							children: [
								{
									label: '三级 2-1-1',
								},
							],
						},
						{
							label: '二级 2-2',
							children: [
								{
									label: '三级 2-2-1',
								},
							],
						},
					],
				},
				{
					label: '一级 3',
					children: [
						{
							label: '二级 3-1',
							children: [
								{
									label: '三级 3-1-1',
								},
							],
						},
						{
							label: '二级 3-2',
							children: [
								{
									label: '三级 3-2-1',
								},
								{
									label: '三级 3-2-1',
								},
								{
									label: '三级 3-2-1',
								},
								{
									label: '三级 3-2-1',
								},
								{
									label: '三级 3-2-1',
								},
								{
									label: '三级 3-2-1',
								},
								{
									label: '三级 3-2-1',
								},
							],
						},
					],
				},
			],
			userData: [
				{
					label: '一级 1',
				},
				{
					label: '一级 1',
				},
				{
					label: '一级 1',
				},
			],
			isAddGroup: false,
			userCheckedOptions: [],
		}
	},
	methods: {
		handleNodeClick(data) {
			console.log(data)
		},
		// 成员组添加
		handleInputBlur() {
			this.isAddGroup = false
		},
		handleAddInput() {
			this.isAddGroup = true
		},
		// 全选用户
		handleChooseUser(type) {
			if (type == 'currentPage') {
				console.log(type)
			}
		},
	},
	watch: {
		checkList: {
			handler(val) {
				console.log(val)
			},
			deep: true,
		},
	},
}
</script>

<style lang="scss" scoped>
.selector-container {
	border: 1px solid #e6e6e6;
	display: flex;
	::v-deep {
		.el-tabs__nav-scroll {
			padding: 0 20px;
		}
	}
}
.selector-left {
	width: 30%;
	background: #f8f8f9;
	padding: 0 8px;
	box-sizing: border-box;
	border-right: 1px solid #e6e6e6;
	.tree-scroll {
		height: 340px;
		overflow-y: auto;
		padding-bottom: 20px;
		margin-top: 10px;
	}
	.member-group {
		text-align: center;
		.add-member {
			display: inline-block;
			color: #f84311;
			cursor: pointer;
		}
	}
}
.selector-center {
	width: 40%;
	padding: 0 10px;
	border-right: 1px solid #e6e6e6;
	box-sizing: border-box;
	position: relative;
	.center-footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px 10px 10px 20px;
		display: flex;
		border-top: 1px solid #e6e6e6;
		align-items: center;
		justify-content: space-between;
		::v-deep {
			.el-pagination {
				margin-bottom: 0 !important;
			}
			.el-pagination__jump {
				margin-left: 0;
			}
		}
	}
	.user-container {
		.tree-item {
			width: 100%;
			display: flex;
			padding-right: 10px;
			align-items: center;
			justify-content: space-between;
		}
	}
}
.selector-right {
	width: 30%;
	padding: 0 10px;
	.right-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #e6e6e6;
	}
}
::v-deep {
	.selector-left {
		.el-tree-node.is-current > .el-tree-node__content {
			color: #fff;
			background-color: #f84311;
		}
		.el-tree {
			background: #f8f8f9;
		}
	}
}
</style>
